<template>
	<uni-popup :mask-click="!isLoad" @maskClick="maskClick" type="bottom" ref="areaChoose">
		<view class="select-city">
			<view class="search">
				<input class="select-input" :value="searchVal" @input='onselectChange($event)'
					placeholder="输入城市名或拼音查询" />
				<!-- 	<van-field class="select-input" input-align="left" :value="searchVal" placeholder="输入城市名或拼音查询"
					@change='onselectChange($event)' /> -->
				<!-- <image class="search-ico" src="../../static/icon.png" mode=""></image> -->
			</view>
			<scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
				<!-- 	<view class="hotcity" id="ScrollTop">
					<view class="hotcity-title">
						北京 <view class="hotcity-gps">GPS定位</view>
					</view>
					<view class="hotcity-cont">
						<view class="hotcity-name">国内热门城市</view>
						<view class="hotcity-menus">
							<view class="hotcity-item" v-for="(item,index) in HotCity" :key='index' @tap="checkItem(item)">
								{{item}}</view>
						</view>
					</view>
				</view>
				<view class="divider"></view> -->
				<view class="citycont" v-for="(item,index) in computedCityList" :key="index">
					<view class="city-letter" :id="item.idx">{{item.idx}}</view>
					<view class="city-item" @tap="checkItem(item_city.name)"
						v-for="(item_city,name_index) in item.cities" :key="name_index">{{item_city.name}}</view>
				</view>
			</scroll-view>

			<!-- 	<view class="city-letter-position">
				<view class="city-letter-rm" @tap="getLetter('ScrollTop')">热门</view>
				<view class="city-letter-ite" v-for="(item,index) in LatterName" :key="index" @tap="getLetter(item)"
					:style="{'color': LetterId === item ? '#4662D9' : '#000' }">{{item}}</view>
			</view> -->
		</view>
	</uni-popup>

</template>

<script>
	import citys from './city.js'
	import citys1 from './city1.js'
	import {
		getLat
	} from '@/utils/api/map'
	export default {
		name: 'area-choose',
		data() {
			return {
				searchVal: '',
				HotCity: ['北京', '深圳', '上海', '成都', '广州', '重庆'],
				LatterName: citys.hostCity,
				CityList: citys.cityList, //引用js数据
				LetterId: '',
			}
		},
		onLoad() {
			this.isLoad = true;
			setTimeout(() => {
				this.show()
			})
		},
		computed: {
			computedCityList() {
				const cityList = JSON.parse(JSON.stringify(citys.cityList))
				if (this.searchVal) {
					return cityList.filter((item) => {
						item.cities = item.cities.filter((item) => {
							return item.name.indexOf(this.searchVal) != -1;
						})
						return item.cities.length
					})
				} else {
					return cityList;
				}
			}
		},
		methods: {
			close() {
				this.$refs.areaChoose.close()
			},
			show() {
				this.$refs.areaChoose.open();
			},
			onselectChange(event) {
				console.log(event.detail);
				this.searchVal = event.detail.value
			},
			checkItem(str) {
				// 市
				let cityCode = '';
				// 省
				let proCode = '';
				// 区
				let disCode = '';
				let addressList = []
				citys1.map((item) => {
					if (item.province == str) {
						proCode = item.code
						addressList = [item.province];
					}
					item.citys.map((item1) => {
						if (item1.city == str) {
							proCode = item.code;
							cityCode = item1.code;
							addressList = [item.province, item1.city];
						}
						item1.areas.map((item2) => {
							if (item2.area == str) {
								disCode = item2.code;
								cityCode = item1.code;
								proCode = item.code;
								addressList = [item.province, item1.city, item2.area];
							}
						})
					})
				})
				if (this.isLoad) {
					uni.navigateBack()
					uni.$emit('mapAddress', {
						addressList,
						disCode,
						cityCode,
						proCode
					})
				} else {
					this.$refs.areaChoose.close()
					this.$emit('confirm', {
						addressList,
						disCode,
						cityCode,
						proCode
					})
				}
			},
			getLetter(name) {
				console.log(name, '0000')
				this.LetterId = name
			},
		}
	}
</script>

<style scoped lang="scss">
	.ynq-ScrollView {
		height: calc(100vh - 300rpx);
	}

	.select-city {
		background-color: #fff;
		.search {
			position: relative;
			padding: 20rpx 0;

			.select-input {
				width: 86%;
				height: 65rpx;
				padding-left: 30rpx;
				margin: auto;
				overflow: hidden;
				background-color: #F5F5F5;
				border-radius: 38rpx;
				display: flex;
				align-items: center;
			}

			.search-ico {
				width: 35rpx;
				height: 35rpx;
				position: absolute;
				top: 26rpx;
				left: 54rpx;
			}
		}

		.hotcity {
			margin: 0 20rpx;

			.hotcity-title {
				height: 65rpx;
				line-height: 65rpx;
				font-size: 32rpx;
				font-weight: 600;
				display: flex;
				border-bottom: 1px solid #ccc;

				.hotcity-gps {
					font-size: 28rpx;
					color: #ccc;
					margin: 10rpx 0 0 12rpx;
				}
			}

			.hotcity-name {
				height: 65rpx;
				line-height: 65rpx;
				color: #ccc;
			}

			.hotcity-menus {
				width: 90%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;

				.hotcity-item {
					width: 30%;
					padding: 10rpx 0;
					margin-bottom: 20rpx;
					border: 1px solid #e1e1e1;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.divider {
			width: 100%;
			height: 24rpx;
			background-color: #e1e1e1;
		}

		.citycont {
			width: 88%;
			margin-left: 20rpx;

			.city-letter {
				height: 80rpx;
				line-height: 90rpx;
			}

			.city-item {
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #e1e1e1;
			}
		}

		.city-letter-position {
			width: 62rpx;
			position: fixed;
			right: 20rpx;
			top: 180rpx;
			text-align: center;
			z-index: 123;

			.city-letter-rm {
				font-size: 24rpx;
			}

			.city-letter-ite {
				font-size: 24rpx;
				line-height: 1.5;
			}
		}
	}
</style>